import React from 'react';
import { View, Text, ScrollView, StyleSheet,TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';

const data = [
    { author: '林季子', content: '在一个孤岛上，有只小猫猫陪在你的身旁' },
    { author: 'weijoyer', content: '家里老旧的挂表，与取暖的火炉，下着小雨' },
    { author: '温柔', content: '在丛林里坐在篝火旁听着虫鸣，风声进入梦乡。' },
    { author: '林深见鹿', content: '超级放松的感觉！很轻松！' },
]

const MoreShow = ({ navigation, route }) => {
    return (
        <ScrollView>
            <View style={styles.headerStyle}>
                <Text onPress={() => navigation.goBack()}><Icon name="arrowleft" size={25}></Icon></Text>
                <Text style={{ marginLeft: ptd(10), fontSize: 20 }}>听友说</Text>
            </View>
            <View style={styles.showS}>
                {
                    data.map((item, idx) => {
                        return (
                            <View key={idx} style={styles.itemS}>
                                <View style={styles.cotStyle}>
                                    <Text style={{ fontSize: 19 }}>{item.content}</Text>
                                </View>
                                <View style={styles.autStyle}>
                                    <Text style={{ fontSize: 16, marginLeft: ptd(20),width:'50%' }}>By {item.author}</Text>
                                    <TouchableOpacity style={styles.play} onPress={() => console.log(2)}><Icon name="caretright" size={28} style={{ color: 'rgba(0,0,0,0.6)' }}></Icon>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        )

                    })
                }
            </View>
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    headerStyle: {
        width: w,
        height: ptd(45),
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: ptd(10),
        borderBottomColor:'rgba(0,0,0,0.2)',
        borderBottomWidth:1
    },
    showS: {
        margin: 5,
        flexDirection: 'column',
        alignItems: 'center'
    },
    itemS: {
        width: '92%',
        height: ptd(200),
        // backgroundColor:'rgb(191,123,162)',
        backgroundColor:'rgb(94,152,215)',
        marginTop: ptd(10),
        borderRadius: 25
    },
    cotStyle: {
        width: '100%',
        height: '68%',
        borderRadius: 25,
        paddingTop: ptd(35),
        paddingLeft: ptd(20),
        paddingRight: ptd(20)
    },
    autStyle: {
        width: '100%',
        height: '32%',
        borderRadius: 25,
        flexDirection: 'row',
        alignItems: 'center',
    },
    play:{
        width:ptd(43),
        height:ptd(43),
        backgroundColor:'rgba(0,0,0,0.2)',
        marginLeft:'25%',
        borderRadius:50,
        alignItems:'center',
        justifyContent:'center'
    }
})

export default MoreShow;